<template>
  <h1>n的值:{{n.y}}</h1>
  <button @click="n.y++">点我n++</button>
  <hr/>
  <h1>{{person}}</h1>
  <button @click="person.name = person.name + '~'">点击修改名字</button>
  <button @click="person.age++">点击修改名字</button>
  <button @click="person.job.j1.salary++">点击涨薪</button>
</template>

<script>
import {shallowReactive, shallowRef} from "vue";
export default {
  name: "my-demo",
  setup() {
    let person =shallowReactive({ //只给第一层的数据响应式
      name:"张三",
      age:'18',
      job:{
        j1:{
          salary:5
        }
      }
    });
    let n = shallowRef({ //只给普通的数据类型响应式 对象类型不行
      y:0
    })
    return{
      person,
      n
    }
  }
}
</script>

<style scoped>

</style>